Modificar DOM usando Viewchild

Como utilizar el decorador Viewchild para acceder al DOM de la página y leer o modificar etiqetas del HTML

Codigo de Ejemplo

Para acceder a una etiqueta del html primero necesitamos identificarla de esta manera:

<a #someInput></a>

En este caso utilizamos el identificador #someInput

A continuación en el archivo ts del componente tenemos que implementar la funcion AfterViewInit en la clase del componente, vez de ngOnInit

export class Test1Component implements AfterViewInit {

Ahora utilizamos el decorador Viewchild para acceder a la etiqueta que definimos previamente en el template:

@ViewChild('someInput') someInput: ElementRef = new ElementRef("");

Ahora podemos utilizar la variable someInput para acceder a la etiqueta y leer su contenido o aplicar nuevo contenido o atributos:

ngAfterViewInit() {
    this.someInput.nativeElement.style = "background-color:lightgreen;";
    this.someInput.nativeElement.innerHTML = "Enlace a google"
    this.someInput.nativeElement.href = "http://google.es"
  }

Para acceder a los distintos datos de la etiqueta solo tenemos que utilizar el atributo nativeElement y a continuacion uno de los elementos de la etiqueta, ya sea innerHTML para acceder al contenido de la etiqueta o por ejemplo href para acceder al atributo de una etiqueta de enlace

NOTA: el objeto nativeElement es de tipo any por lo tanto el IDE no nos dara ninguna prediccion de los atributos que tiene el objeto, asi que tendremos que poner nosotros los atributos en consonancia con la etiqueta a la que estemos accediendo.

Angular | DOM | Viewchild